<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对战投票</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
<style>
    body {
        background-size: 100% 100%;
        background-color: #eee1e1;
        background-repeat: no-repeat;
        height: 900px;
    }
    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }
    a {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
</style>
<style th:inline="css">
    @keyframes top {
        from {
            width: 0%;
        }
        to {
            width: [ [${top}] ] + '%';
        }
    }
    .p1 {
        animation-name: top;
        animation-duration: 3s;
        animation-timing-function: ease;
        /**动画播放方向**/
        animation-direction: alternate;
        /**保持之前样式还是之后样式**/
        animation-fill-mode: both;
        animation-iteration-count: 1;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div style="padding-top: 120px;" id="main">
    <div th:if="${top.size()>0}">
        <div th:each="top:${top}" style="width: 100%;">
            <div class="media" style="
margin-left: 100px;margin-top: 20px">
                <div class="media-body">
                    <h1 class="mt-0 mb-1" style="font-style:italic" th:text="'TOP'+${top.top}"></h1>
                    <img th:if="${top.top==1}" th:src="@{/img/top1.png}" width="60px;" height="60px"
                         style="float: left">
                    <img th:if="${top.top==2}" th:src="@{/img/top2.png}" width="60px;" height="60px"
                         style="float: left">
                    <img th:if="${top.top==3}" th:src="@{/img/top3.png}" width="60px;" height="60px"
                         style="float: left">
                    <div th:if="${top.top>3}"
                         style="float: left;width: 50px;height:50px;background-color:#eee1e1;"></div>
                    <img class="ml-3" th:src="@{${top.playerImg}}"
                         style="width: 80px;position:absolute;height: 80px;border:1px solid red;float:left;border-radius: 50%"
                         alt="Generic placeholder image">
                    <div class="progress"
                         style="width: 900px;float:left;margin-left:15px;height: 80px;border-radius: 44px">
                        <div class="progress-bar bg-danger p1"
                             th:Style="'width: '+${top.ticket}+'%'"
                             id="p1"
                             role="progressbar" aria-valuemin="0"
                             aria-valuemax="100">
                        </div>
                        <div style="width: 50px;height: 80px;font-size:22px;display: flex;justify-content: flex-start;align-items: center">
                            <p th:text="${top.ticket}"></p>
                        </div>
                    </div>
                    <div style="width: 200px;height: 80px;font-size:22px;display: flex;justify-content: center;align-items: center">
                        <p th:text="${top.playerNumber}+'号-'+${top.playerName}"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div th:if="${top.size()<=0}">
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4">该比赛暂无对战排行</h1>
                <p class="lead">耐心等待开启对战</p>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    $(function () {
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            positionClass: "toast-center-center",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
        $('#main').hide();
        $('#main').fadeToggle(4000)
    })
</script>
</html>